<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link media="all" href="/library/skin/tool_base.css" rel="stylesheet" type="text/css" />
        <link href="/mailsender-tool/content/css/MailSender.css" type="text/css" rel="stylesheet" media="all" />
        <script src="/library/js/headscripts.js"></script>
        <script src="/library/js/spinner.js"></script>
        <script src="/mailsender-tool/content/js/mailsender.js"></script>
        [(${sakaiHtmlHead})]
    </head>
    <body>
        <div class="portletBody">
            <div style="display:none;">
                <span id="mailsender.attachment_size_limit" th:text="#{mailsender.attachment_size_limit}"/>
                <span id="mailsender.attachment_size_limit_end" th:text="#{mailsender.attachment_size_limit_end}"/>
                <span id="mailsender.zero_bytes" th:text="#{mailsender.zero_bytes}"/>
                <span id="mailsender.unit_sizes" th:text="#{mailsender.unit_sizes}"/>
                <span id="max-attachment-size" th:text="${comp.maxUploadFileSize}"/>
            </div>
            <div id="menu" th:include="fragments/menus :: main (compose)" />
            <div th:if="${noemail}" th:utext="#{no.from.address}" class="sak-banner-error"/>
            <div th:if="${error != null}" th:text="${error}" class="sak-banner-error"/>
            <form id="mainForm" method="post" th:action="@{/compose}" enctype="multipart/form-data" data-dirty="false" th:object="${emailEntry}" class="d-grid">
                <div class="page-header">
                    <h1 th:text="#{compose_toolbar}">Compose</h1>
                </div>
                <div class="section">
                    <div class="headerkeyholder">
                        <span th:text="#{from}" class="headerkey">From:</span>
                    </div>
                    <div class="headervalue">
                        <span id="from" th:value="*{from}"  th:text="*{from}" >Freeman, Douglas Stuaart &lt;stuart.freeman@et.gatech.edu&gt;</span>
                    </div>
                </div>
                <div class="section">
                    <div  class="headerkeyholder">
                        <span th:text="#{select_rcpts}" class="headerkey align-header">Select recipients:</span>
                    </div>
                    <div id="todiv" class="headervalue"> 
                        <ul class="nav nav-pills" role="tablist">
                            <li class="select-all">
                                <input type="checkbox" id="mailsender-rcpt-all" name="rcptsall" onclick="RcptSelect.toggleSelectAll()" th:aria-label="#{a11y_rcpts_all}" th:title="#{a11y_rcpts_all}" value="true"/>
                                <label th:text="#{select_rcpts_all}" for="mailsender-rcpt-all">All</label>
                            </li>
                            <li role="presentation" class="nav-item">
                                <button type="button" id="mailsender-tab-roles" onclick="show(this.id)" th:text="#{select_rcpts_by_role}" class="btn-tab nav-link" role="tab" aria-controls="mailsender-roles" aria-selected="false">Roles</button>
                            </li>
                            <li role="presentation" class="nav-item">
                                <button type="button" id="mailsender-tab-sections" onclick="show(this.id)" th:text="#{select_rcpts_by_section}" class="btn-tab nav-link" role="tab" aria-controls="mailsender-sections" aria-selected="false">Sections</button>
                            </li>
                            <li role="presentation" class="nav-item">
                                <button type="button" id="mailsender-tab-groups" onclick="show(this.id)" th:text="#{select_rcpts_by_group}" class="btn-tab nav-link" role="tab" aria-controls="mailsender-groups" aria-selected="false">Groups</button>
                            </li>
                        </ul>

                        <ul id="mailsender-roles" class="rolesArea d-none" role="tabpanel" aria-labelledBy="mailsender-tab-roles">
                            <th:block th:with="emailRoles=${comp.getEmailRoles()}">
                                <li th:if="${emailRoles.size() == 0}" class="not-found">
                                    <span th:text="#{no.role.found}" aria-live="polite"/>
                                </li>
                                <li th:unless="${emailRoles.size() == 0}" th:each="rol:${emailRoles}" class="userGroupsList">
                                    <th:block th:with="roleUsers=${comp.getUsersByRole(rol.getRoleId())},roleId=${rol.getRoleId()}">
                                        <input th:id="${roleId}" type="checkbox" name="rolename" th:value="${roleId}" 
                                               onclick="RcptSelect.toggleSelectAll(this.id)" 
                                               th:aria-label="#{a11y_rcpts_by_role(${roleId})}" 
                                               th:title="#{a11y_rcpts_by_role(${roleId})}"></input>
                                        <button type="button" onclick="showIndividuals(this)" class="btn btn-transparent" 
                                                th:aria-label="#{a11y_show_users(${roleId})}" 
                                                th:title="#{a11y_show_users(${roleId})}" aria-expanded="false">
                                            <b th:text="${roleId} "></b>
                                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                                        </button>
                                        <ul class="d-none scrollable-list" th:aria-label="${roleId}" tabindex="-1">
                                            <li th:if="${roleUsers.size() == 0}" aria-live="polite">
                                                <span th:text="#{no.role.members.found}"/>
                                            </li>
                                            <li th:unless="${roleUsers.size() == 0}" th:each="user:${roleUsers}" >
                                                <input th:id="'rol-'+(${user.getId()})" type="checkbox" name="user" th:value="${user.getId()}" onclick="RcptSelect.toggleIndividual(this.id)" th:attrappend="disabled=${user.getEmail().isEmpty()}?@{disabled}"/>
                                                <label class="user-label" th:text="${user.getDisplayName()}+' ('+ ${user.getDisplayId()}+')'" th:for="'rol-'+(${user.getId()})"/>
                                            </li>
                                        </ul>
                                    </th:block>
                                </li>
                            </th:block>
                        </ul>
                        <ul id="mailsender-sections" class="rolesArea d-none" role="tabpanel" aria-labelledBy="mailsender-tab-sections">
                            <th:block th:with="emailSections=${comp.getEmailSections()}">
                                <li th:if="${emailSections.size() == 0}" class="not-found">
                                    <span th:text="#{no.section.found}" aria-live="polite"/>
                                </li>
                                <li th:unless="${emailSections.size() == 0}" th:each="rolsec:${emailSections}" class="userGroupsList">
                                    <th:block th:with="sectionUsers=${comp.getUsersByGroup(rolsec.getRoleId())},
                                                      userCount=${comp.countUsersByGroup(rolsec.getRoleId())},
                                                      roleSingular=${rolsec.getRoleSingular()},
                                                      roleId=${rolsec.getRoleId()}">
                                        <input th:id="${roleSingular}" type="checkbox" name="rolesecname" th:value="${roleId}" 
                                               onclick="RcptSelect.toggleSelectAll(this.id)" 
                                               th:aria-label="#{a11y_rcpts_by_section(${roleSingular})}" 
                                               th:title="#{a11y_rcpts_by_section(${roleSingular})}"></input>
                                        <button type="button" onclick="showIndividuals(this)" class="btn btn-transparent" 
                                                th:aria-label="#{a11y_show_users(${roleSingular})}" 
                                                th:title="#{a11y_show_users(${roleSingular})}" aria-expanded="false">
                                            <b th:text="${roleSingular} "></b>
                                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                                        </button>
                                        <ul class="d-none scrollable-list" th:aria-label="${roleSingular}" tabindex="-1">
                                            <li th:if="${userCount == 0}" aria-live="polite">
                                                <span th:text="#{no.section.members.found}"/>
                                            </li>
                                            <li th:unless="${userCount == 0}" th:each="usersec:${sectionUsers}">
                                                <input th:id="'sec-'+${usersec.getId()}" type="checkbox" name="user" th:value="${usersec.getId()}" onclick="RcptSelect.toggleIndividual(this.id)" th:attrappend="disabled=${usersec.getEmail().isEmpty()}?@{disabled}" />
                                                <label class="user-label" th:text="${usersec.getDisplayName()}+' ('+ ${usersec.getDisplayId()}+')'" th:for="'sec-'+${usersec.getId()}"/>
                                            </li>
                                        </ul>
                                    </th:block>
                                </li>
                            </th:block>
                        </ul>
                        <ul id="mailsender-groups" class="rolesArea d-none" role="tabpanel" aria-labelledBy="mailsender-tab-groups">
                            <th:block th:with="emailGroups=${comp.getEmailGroups()}">
                                <li th:if="${emailGroups.size() == 0}" class="not-found">
                                    <span th:text="#{no.group.found}" aria-live="polite"/>
                                </li>
                                <li th:unless="${emailGroups.size() == 0}" th:each="rolg:${emailGroups}" class="userGroupsList">
                                    <th:block th:with="groupUsers=${comp.getUsersByGroup(rolg.getRoleId())},
                                                              userCount=${comp.countUsersByGroup(rolg.getRoleId())},
                                                              roleSingular=${rolg.getRoleSingular()},
                                                              roleId=${rolg.getRoleId()}">
                                        <input th:id="${roleSingular}" type="checkbox" name="rolegname" th:value="${roleId}" 
                                               onclick="RcptSelect.toggleSelectAll(this.id)" 
                                               th:aria-label="#{a11y_rcpts_by_group(${roleSingular})}" 
                                               th:title="#{a11y_rcpts_by_group(${roleSingular})}"></input>
                                        <button type="button" onclick="showIndividuals(this)" class="btn btn-transparent" 
                                                th:aria-label="#{a11y_show_users(${roleSingular})}" 
                                                th:title="#{a11y_show_users(${roleSingular})}" aria-expanded="false">
                                            <b th:text="${roleSingular} "></b>
                                            <i class="fa fa-angle-down" aria-hidden="true"></i>
                                        </button>
                                        <ul class="d-none scrollable-list" th:aria-label="${roleSingular}" tabindex="-1">
                                            <li th:if="${userCount == 0}" aria-live="polite">
                                                <span th:text="#{no.group.members.found}"/>
                                            </li>
                                            <li th:unless="${userCount == 0}" th:each="userg:${groupUsers}">
                                                <input th:id="'gro-'+${userg.getId()}" type="checkbox" name="user" th:value="${userg.getId()}" onclick="RcptSelect.toggleIndividual(this.id)" th:attrappend="disabled=${userg.getEmail().isEmpty()}?@{disabled}" />
                                                <label class="user-label" th:text="${userg.getDisplayName()}+' ('+ ${userg.getDisplayId()}+')'" th:for="'gro-'+${userg.getId()}"/>
                                            </li>
                                        </ul>
                                    </th:block>
                                </li>
                            </th:block>
                        </ul>
                    </div>
                </div>
                <div class="headervalue" id="otherRecipientsLink" >
                    <button th:text="#{addotherrecipients}" onclick="RcptSelect.showOther();return false" class="btn btn-transparent link-color">Other Recipient(s):</button>
                </div>

                <div class="section" id="otherRecipientsDiv" style="display:none">
                    <div class="headervalue">
                        <span th:text="#{otherrecipients}">Other Recipients:</span>
                    </div>
                    <div class="headervalue" id="otherRecipientsValue">
                        <input class="fullwidth" name="otherRecipients" th:field="*{otherRecipients}" value="" type="text" id="otherRecipients" />
                        <div th:text="#{otherrecipients_instruction}" class="instruction">Separate additional email addresses with commas or semicolons.</div>
                    </div>
                </div>
                <div class="section">
                    <div class="headerkeyholder">
                        <span class="headerkey"><label th:text="#{message_subject}" for="subject">Subject:</label></span>
                    </div>
                    <div class="headervalue">
                        <input id="subject" class="fullwidth" name="subject" value="" type="text" th:field="*{subject}" />
                    </div>
                </div>

                <div class="section">
                    <div id="attachOuter" class="headerkeyholder" style="display:none">
                        <span class="headerkey"><img src="/mailsender-tool/content/images/paperclip.gif" alt="attachment_img" height="15" width="15" ></span>
                    </div>
                    <div id="attachInner" class="headervalue">
                        <div id="attach-size-error" class="sak-banner-error" style="display:none; margin-top: 0">Attachment size exceeded message rendered here</div>
                        <div id="attachmentArea" name="attachmentArea"/>
                        <div id="attachLink"><img src="/mailsender-tool/content/images/paperclip.gif" alt="attachment_img" height="15" width="15" />
                        <button onclick="MailSender.addAttachment('attachmentArea'); return false;" th:text="#{attachlink}" class="btn btn-transparent link-color">Attach a file</button>
                        </div>
                        <div id="attachMoreLink" style="display:none">
                            <button onclick="MailSender.addAttachment('attachmentArea'); return false;" th:text="#{attachmorelink}" class="btn btn-transparent link-color">Attach another file</button>
                        </div>
                        </div>
                    </div>

                    <div class="section">
                        <div class="headervalue">
                            <textarea th:text="|*{content}|"  name="editor1" id="editor1"></textarea>
                        </div>
                    </div>

                    <div class="section">
                        <div class="headervalue">
                            <input name="onlyPlainText" type="checkbox" id="onlyPlainText" value="true" th:checked="*{config.isOnlyPlainText}"/>
                            <label th:text="#{onlyplaintext}" for="onlyPlainText">Send only as plain text</label>
                        </div>
                        <div class="headervalue">
                            <input name="smac" type="checkbox" id="sendMeACopy" value="true" th:attrappend="checked=*{config.isSendMeACopy() == true}?@{checked}"/>
                            <label th:text="#{sendmeacopy}" for="sendMeACopy">Send me a copy</label>
                        </div>
                        <div th:if="${addedTo}" id="addToArchiveDiv" class="headervalue">
                            <input  name="addToArchive" type="checkbox" id="addToArchive" value="true" th:attrappend="checked=*{config.isAddToArchive() == true}?@{checked}" />
                            <label th:text="#{addtoemailarchive}" for="addToArchive">
                                Add to Email Archive, visible to all site participants
                            </label>
                        </div>
                        <div class="headervalue">
                            <input name="appendRecipientList" type="checkbox" id="appendRecipientList" value="true"  th:attrappend="checked=*{config.isAppendRecipientList() == true}?@{checked}"/>
                            <label th:text="#{appendrecipientlist}" th:value="#{appendrecipientlist}" for="appendRecipientList">Append list of recipients to message</label>
                        </div>
                    </div>
                    <div class="section headervalue act">
                        <input id="send-button" value="Send Mail" class="active" type="submit" th:attrappend="disabled=${email == true}?@{disabled}" />
                        <input id="cancel-button" value="Cancel" type="button" onclick="location.reload();" />
                    </div>
            </form>
            <script>  sakai.editor.launch("editor1", "{noop:0}");
                CKEDITOR.instances.editor1.setData(/*[[${emailEntry.content}]]*/);
                
                const troles = document.getElementById("mailsender-tab-roles");
                const tsections = document.getElementById("mailsender-tab-sections");
                const tgroups = document.getElementById("mailsender-tab-groups");
                const roles = document.getElementById("mailsender-roles");
                const sections = document.getElementById("mailsender-sections");
                const groups = document.getElementById("mailsender-groups");

                function showIndividuals(button) {
                    if (button.getAttribute("aria-expanded") == "true" ){
                        button.setAttribute("aria-expanded", "false");
                    } else {
                        button.setAttribute("aria-expanded", "true");
                    }

                    if (button.nextElementSibling.className.includes("d-none")) {
                        button.nextElementSibling.classList.remove("d-none");
                    } else {
                        button.nextElementSibling.classList.add("d-none");
                    }
                };

                function show(id) {
                    switch (id) {
                        case "mailsender-tab-roles":
                            roles.classList.remove("d-none");
                            troles.classList.add("selected");
                            troles.setAttribute("aria-selected", "true");
                            sections.classList.add("d-none");
                            tsections.classList.remove("selected");
                            tsections.setAttribute("aria-selected", "false");
                            groups.classList.add("d-none");
                            tgroups.classList.remove("selected");
                            tgroups.setAttribute("aria-selected", "false")
                            break;

                        case "mailsender-tab-sections":
                            sections.classList.remove("d-none");
                            tsections.classList.add("selected");
                            tsections.setAttribute("aria-selected", "true");
                            roles.classList.add("d-none");
                            troles.classList.remove("selected");
                            troles.setAttribute("aria-selected", "false");
                            groups.classList.add("d-none");
                            tgroups.classList.remove("selected");
                            tgroups.setAttribute("aria-selected", "false");
                            break;

                        case "mailsender-tab-groups":
                            groups.classList.remove("d-none");
                            tgroups.classList.add("selected");
                            tgroups.setAttribute("aria-selected", "true");
                            sections.classList.add("d-none");
                            tsections.classList.remove("selected");
                            tsections.setAttribute("aria-selected", "false");
                            roles.classList.add("d-none");
                            troles.classList.remove("selected");
                            troles.setAttribute("aria-selected", "false");
                            break;
                    }
                };

                var form = document.getElementById('mainForm');
                form.addEventListener('change', function (e) {
                    this.dataset.dirty="true"
                 });
                            
                 CKEDITOR.instances.editor1.on('change', function() {
                    form.dataset.dirty="true"
                });
                    
                function losedata(msg) {
                    if (form.dataset.dirty=='true'){
                        return confirm(msg);
                    }
                    return true;
                };

                document.getElementById("onlyPlainText").addEventListener('change', function() {
                    if (this.checked) {
                        const editor = CKEDITOR.instances.editor1;
                        if (editor.mode === 'wysiwyg') {
                            editor.execCommand('source');
                        }
                    }
                });
            </script>
        </div>
    </body>
</html>
